@(nav: String, tweetsJson: String, hotTweetsJson: String, page: Int, total: Int)(implicit request: RequestHeader)

@import helper._
@import utils.RequestHelper
@import play.api.libs.json.Json
@main(s"${app.Global.siteSetting.indexTitle}", "tweet", "") {
@views.html.nav("")
<div id="app" class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      <div class="fly-panel">
        <form id="tweet-form" class="layui-form">
          <div class="layui-form-item layui-form-text" style="margin-bottom: 0px;">
            <div class="layui-input-block" style="margin-left: 0px;">
              <textarea id="tweet" placeholder="发表说说" class="layui-textarea" rows="4" style="min-height:20px;"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px;">
              <button class="layui-btn layui-btn-small" style="width: 100%; font-size: 15px;">发表说说</button>
            </div>
          </div>
        </form>
      </div>

      <div class="fly-panel" style="margin-bottom: 0;">
        <div class="fly-panel-title fly-filter">
          <a>最新说说</a>
        </div>

        <ul class="fly-list">
          <template v-for="(t, index) in tweets">
          <li style="border: 0px; height: auto;">
            <a :href="'/user/home?uid=' + t.author._id" class="fly-avatar">
              <img :src="t.author.headImg" alt="">
            </a>
            <span><a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}</span>
            <div class="fly-list-info">
              <a :href="'/tweet/view?_id=' + t._id" link>
                <cite>查看</cite>
              </a>
              <span>{{ t.time }}</span>
              <span class="fly-list-nums">
                        <i class="iconfont icon-pinglun1" title="回答"></i> {{ t.replyCount }}
                        <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet" data-title="说说"></i> {{ t.voteCount }}
                      </span>
            </div>
          </li>
          </template>
        </ul>
        <div style="text-align: center">
          <div class="laypage-main">
            <a href="/tweets?page=@{page-1}" class="laypage-prev">上一页</a><span>@{page}/@{math.ceil(total/15.0).toInt}</span><a href="/tweets?page=@{page+1}" class="laypage-next">下一页</a></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="fly-panel">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 0px;">
          <ul class="layui-tab-title fly-panel-title">
            <li class="layui-this">热门说说</li>
          </ul>
          <div class="layui-tab-content" style="padding-left: 0px; padding-right: 0px;">
            <div class="layui-tab-item layui-show">
              <ul class="fly-panel fly-list">
                <template v-for="(t, index) in hotTweets">
                  <li style="padding: 3px 10px 2px 50px; height: auto; border: 0px;">
                    <a :href="'/user/home?uid=' + t.author._id" class="fly-avatar" style="top: 0px;">
                      <img :src="t.author.headImg" alt="" style="width:30px;height:30px;">
                    </a>
                    <span><a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}</span>
                    <div class="fly-list-info">
                      <a :href="'/tweet/view?_id=' + t._id" link>
                        <cite>查看</cite>
                      </a>
                      <span>{{ t.time }}</span>
                      <span class="fly-list-nums">
                        <i class="iconfont icon-pinglun1" title="回答"></i> {{ t.replyCount }}
                        <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet" data-title="说说"></i> {{ t.voteCount }}
                      </span>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!--<div class="fly-panel fly-rank fly-rank-reply" id="LAY_replyRank">
          <h3 class="fly-panel-title">回贴周榜</h3>
          <dl>
              &lt;!&ndash;<i class="layui-icon fly-loading">&#xe63d;</i>&ndash;&gt;
              <dd>
                  <a href="user/home.html">
                      <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"><cite>贤心</cite><i>106次回答</i>
                  </a>
              </dd>
          </dl>
      </div>-->

      <!--<div class="fly-panel">
          <div class="fly-panel-title">
              这里可作为广告区域
          </div>
          <div class="fly-panel-main">
              <a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
          </div>
      </div>-->

      <!--<div class="fly-panel fly-link">
          <h3 class="fly-panel-title">友情链接</h3>
          <dl class="fly-panel-main">
              <dd><a href="http://www.layui.com/" target="_blank">layui</a><dd>
              <dd><a href="http://layim.layui.com/" target="_blank">WebIM</a><dd>
              <dd><a href="http://layer.layui.com/" target="_blank">layer</a><dd>
              <dd><a href="http://www.layui.com/laydate/" target="_blank">layDate</a><dd>
          </dl>
      </div>-->

    </div>
  </div>
</div>
}

<script src="/assets/js/socket.io.js"></script>
<script src="/assets/js/vue.js"></script>
<script>
var token = '';
var app = new Vue({
  el: '#app',
  data: { tweets: @Html(tweetsJson), hotTweets: @Html(hotTweetsJson)}
});

var socket = io("/tweet");
socket.on('chat message', function(tweet) {
    app.tweets.unshift(JSON.parse(tweet));
});

$('#tweet-form').submit(function(){
  var tweet = $('#tweet').val();
  if($.trim(tweet) == ""){ return false; }
  $.ajax({
    type: 'post',
    dataType: 'json',
    data: {content: tweet, images: []},
    url: '/tweet/add?csrfToken=' + token,
    success: function(res){
      if(res.status === 0) {
        $('#tweet').val('');
        socket.emit('chat message', JSON.stringify(res.tweet));
      } else {
        layer.msg(res.msg||res.code);
      }
    }, error: function(e){
      layer.msg('请求异常，请重试');
    }
  });
  return false;
});

$(document).on('click', 'i.zan-resource', function(){
  var othis = $(this), resId = othis.attr('data-id'), resType = othis.attr('data-type'), resTitle = othis.attr('data-title');
  layui.fly.json('/resource/vote', {
    resId: resId
    ,resType: resType
    ,resTitle: resTitle
  }, function(res){
    for(i in app.tweets){
      if(app.tweets[i]._id == resId){
        app.tweets[i].voteCount += res.count;
      }
    }
    for(i in app.hotTweets){
      if(app.hotTweets[i]._id == resId){
        app.hotTweets[i].voteCount += res.count;
      }
    }
  });
});
</script>